<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>推荐音乐</title>
		<link rel="stylesheet" type="text/css" href="css/tuijianyinyue.css"/>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#nav{width: 100%;height: 40px;
			background-color: red;}
			#centen{
				width: 90%;
				height: 40px;
				margin: 0 auto;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction:row ;
			}
			#logo{
				width: 40px;
				height: 48px;
				float: left;
				color: wheat;
				text-align: center;
				line-height: 40px;
				font-size: 30px;
				font-weight: 700;
			}
			#name1,#name2,#name3{
				width: 55px;
				height: 20px;
				float: left;
				border: 1px solid white;
				border-radius: 20px;
				margin-right: 5px;
				text-align: center;
				line-height: 20px;
				font-size: 10px;
				color: wheat;
				font-weight: 400;
			}
			#name1:hover,#name2:hover,#name3:hover{
				background-color:darkgray;
			}
			#sea{
				width: 100px;
				height: 20px;
				float: left;
				border: 0;
				text-align: center;
				line-height: 20px;
				font-size: 10px;
				display: flex;
				overflow: hidden;
			}
			
		</style>
	</head>
	<body>
		<!--导航栏-->
		<div id="nav">
			<div id="centen">			
				<div id="logo">&#128330;</div>
				<a href="index.html"><div id="name1">发现音乐</div></a>
				<a href="index3.html"><div id="name2">推荐音乐</div></a>
				<a href="index2.html"><div id="name3">我的音乐</div></a>			
			</div>
		</div>
		<!--文字介绍-->
		<div id="d1">
			<div id="d2">
				<div id="d3">个性推荐</div>
				<div id="d4">歌单</div>
				<div id="d4">主播电台</div>
				<div id="d4">排行榜</div>
				<div id="d4">最近更新</div>
			</div>
		</div>
		<!--mv-->
		<div id="mv" onClick="msgmv(1)">
			<img src="img/m1.png" >
			<div id="mv-w"><神奇宝贝主题曲></div>			
		</div>
		<div id="mv" onClick="msgmv(1)">
			<img src="img/m2.png" >
			<div id="mv-w">Yes or no</div>			
		</div>
		<div id="mv" onClick="msgmv(1)">
			<img src="img/m3.png" >
			<div id="mv-w">《天下》mv</div>			
		</div>
		<div id="mv" onClick="msgmv(1)">
			<img src="img/m4.png" >
			<div id="mv-w">一个人（张liang）</div>			
		</div>
		<div id="mv" onClick="msgmv(1)">
			<img src="img/w5.png" >
			<div id="mv-w">让我留在你身边</div>			
		</div>
		<div id="mv" onClick="msgmv(1)">
			<img src="img/w6.png" >
			<div id="mv-w">换季（Bonus Track）</div>			
		</div>
		<div id="mv" onClick="msgmv(1)">
			<img src="img/w7.png" >
			<div id="mv-w">L.I.K.E</div>			
		</div>
		<div id="mv" onClick="msgmv(1)">
			<img src="img/w8.png" >
			<div id="mv-w">01 TOTO</div>			
		</div>
		<!--js关闭弹窗-->
		<script>
		function msgmv(n){
		document.getElementById('inputmv').style.display=n?'block':'none'; /* 点击按钮打开/关闭 对话框 */
		}
		</script>
		<!--弹出mv-->
		<div id='inputmv' class="mv">
			<a class='x' href=''; onclick="msgmv(0); return false;"><返回</a>
			<div id="tan">								
				<video src="./video/黑猫警长Giao哥,祁影很法克儿,你的寒王%20-%20嚣张.mp4" controls="controls"></video>			
			</div>
		</div>
		
		<!--mv排行榜-->
		<div class="p"> MV排行榜 > </div>
			
		
		<div id="mwaikuang">
			<div id="paihangbang">
				<img src="img/p1.jpg"  onclick="return false" >
			</div>
			<div id="paihangbang">
				<img src="img/p2.jpg"  onclick="return false">
			</div>
			<div id="paihangbang">
				<img src="img/p3.jpg" onclick="return false">
			</div>
			<div id="paihangbang">
				<img src="img/p4.jpg"  onclick="return false">
			</div>
			<div id="paihangbang">
				<img src="img/p5.jpg"  onclick="return false">
			</div>
		</div>
	</body>
</html>
